import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import eslintPlugin from 'vite-plugin-eslint'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin'
// import viteCompression from 'vite-plugin-compression'

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      vue(),
      vueJsx(),
      // 增加下面的配置项,这样在运行时就能检查eslint规范
      eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
      }),
      // 配置是否开启gzip，需要服务器端配合
      // viteCompression({
      //   verbose: true,
      //   disable: false,
      //   threshold: 10240,
      //   algorithm: 'gzip',
      //   ext: '.gz',
      // })
    ],
    resolve: {
      // 配置路径别名
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 静态资源服务文件夹
    // publicDir: env.NODE_ENV === 'production' ? '/' : '../',
    // css预处理
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "sass:math";`
        }
      },
      postcss: {
        plugins: [
          postcsspxtoviewport8plugin({
            unitToConvert: 'px',
            viewportWidth: file => {
              let num = 750
              // 适配vant的设计图375px
              if (file.includes('vant')) {
                num = 375
              }
              return num
            },
            unitPrecision: 5, // 单位转换后保留的精度
            propList: ['*'], // 能转化为vw的属性列表
            viewportUnit: 'vw', // 希望使用的视口单位
            fontViewportUnit: 'vw', // 字体使用的视口单位
            selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
            minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
            mediaQuery: true, // 媒体查询里的单位是否需要转换单位
            replace: true, //  是否直接更换属性值，而不添加备用属性
            // exclude: [/node_modules\/ant-design-vue/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
            // include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
            // landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
            landscapeUnit: 'vw', // 横屏时使用的单位
            landscapeWidth: 1024, // 横屏时使用的视口宽度
          }),
        ],
      },
    },
    // 配置：开发服务器选项
    server: {
      // 端口
      port: 5176,
      open: true,
      // 代理
      proxy: {
        // host/api/xxxx => env.VITE_APP_BASE_API/xxxx
        '/api': {
          target: env.VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
        // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
        '/socket.io': {
          target: 'ws://localhost:5174',
          ws: true,
        },
      },
    },
    // 打包读取资源时的路径
    base: './',
    build: {
      // 构建生成文件时的目录名称
      outDir: 'dist',
      // 放置生成的静态资源的目录名称,默认assets
      assetsDir: 'static',
      // 为 CSS 的压缩设置一个不同的浏览器 target
      // cssTarget: 'chrome61',
      // 使用esbuild压缩最小化css
      cssMinify: true,
      // 构建是否生成sourcemap文件 boolean | 'inline' | 'hidden'
      sourcemap: false,
      rollupOptions: {
        // 打包输出文件分类 至 static文件夹下的xxx
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        }
      }
    }
  }
})
